<script lang="ts" setup>
import { useRoute } from 'vue-router';
import { onMounted, ref } from 'vue';
import SystemHeader from '@/components/common/system-header.vue';
import { terminalHooks } from '@/views/breedingManage/terminalManage/terminalHooks';
import { breedingPondManageHooks } from '@/views/breedingManage/breedingPondManage/breedingPondManageHooks';
import { useProjectStore } from '@/store/modules/project';
import DetailsLeft from './components/detailsLeft.vue';
import DetailsRgiht from './components/detailsRight.vue';
import DetailsCenter from './components/detailsCenter.vue';
const route = useRoute();
const { getHostList } = terminalHooks();
const { getFarmList } = breedingPondManageHooks();
const projectStore = useProjectStore();

const farmName = route.query.name ? route.query.name : '';
const hostData = ref([]);
const farmData = ref([]);

onMounted(async () => {
  if (hostData.value.length === 0) {
    hostData.value = await getHostList({ projectId: projectStore.currentProject?.id });
  }
  if (farmData.value.length === 0) {
    farmData.value = await getFarmList(projectStore.currentProject?.id);
  }
});
</script>

<template>
  <div class="index">
    <div class="bg"></div>
    <SystemHeader>
      <template #left>
        <span style="display: block; width: 90%" @click="$router.go(-1)">返回</span>
      </template>
      <template #prefix>养殖池名称: {{ farmName }}</template>
    </SystemHeader>
    <div class="index-warp">
      <DetailsLeft v-model:hostData="hostData" v-model:farmData="farmData" />
      <DetailsCenter />
      <DetailsRgiht v-model:hostData="hostData" v-model:farmData="farmData" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.index {
  &-warp {
    position: absolute;
    top: 125px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    height: calc(100% - 125px);
    overflow: auto;
  }
  .bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: url('../../assets/imgs/index-bg.png');
    background-size: 100% 100%;
  }
}
</style>
